design-patterns-nuxt/pages/details/[id].vue

<template>
  <section>
    <img :src="config.public.IMG_BASE_URL + film.poster_path" :alt="film.title">
    <span class="flex flex-row">
      {{ film.title }}
      {{ film.original_title }}
      {{ film.vote_count }}
      {{ film.release_date }}
      {{ film.id }}
    </span>
  </section>
</template>

<script setup lang="ts">
const config = useRuntimeConfig()
const film = ref()
const route = useRoute()
const filmId = ref('')
filmId.value = route.params.id

if (filmId.value !== '') {
  const { data } = await useFetch(`/api/details/${filmId.value}`)
  film.value = data.value
}
</script>